// @import './reset.css';
@import './variable.scss'; // css变量
@import './btn.scss'; // css变量
@import './header.scss'; // css变量

//@import './iconfont.css';
// * { touch-action: pan-y; }
.main-font-color{color:$mainFontColor !important;}
.secondary-font-color{color:$secondaryFontcolor !important;}

.primary-font-color{color:$primaryColor !important;}
.success-font-color{color:$successColor !important;}
.info-font-color{color:$infoColor !important;}
.warning-font-color{color:$warningColor !important;}
.danger-font-color{color:$dangerColor !important;}
.calcel-font-color{color:$calcelColor !important;}
.silver-font-color{ color:#a2a2a2 !important;}
// video,
// video::-webkit-media-controls{
//   display:none !important;
// }


.ql-container{
  min-height: 3rem;
}

.phone-number-input{
  .weui-cells{
    margin-top:0;
    .vux-x-input{
      // margin-top:.12rem;
    }
    &:before{
      border: 0 !important;
    }
    &:after{
      border: 0 !important;
    }
  }
}
.phone-number-input1{
  .weui-cells{
    margin-top:0;
    .vux-x-input{
      margin-top:0;
    }
    &:before{
      border: 0 !important;
    }
    &:after{
      border: 0 !important;
    }
  }
}
//不换行，溢出部分变为省略号
.no-wrap{
  text-overflow: ellipsis;/*这就是省略号喽*/
  overflow: hidden;/*设置超过的隐藏*/
  white-space: nowrap;/*设置不断行*/
  width:4.4rem;/*设置宽度*/
}

//常用文字大小设置
.fs34{
  font-size: .34rem;
}
.fs32{
  font-size: .32rem;
}
.fs26{
  font-size: .26rem;
}
.fs30{
  font-size: .3rem;
}
.fs24{
  font-size: .24rem;
}
.fs28{
  font-size: .28rem;
}
.bold{
  font-weight: bold;
}
.bg-white{
  background: #FFFFFF !important;
}
a{
  text-decoration: none;
}
#app{
  margin:0 auto;
  width: 7.5rem;
  height: 100vh;
  overflow: hidden;
  background:$bgColor;
}
body,html{
  margin:0;padding:0;
  width:100%;height:100%;
  font:.2rem 'PingFang-SC-Medium', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica, Arial', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left; color: $mainFontColor;
  overflow:hidden;
  // background:#FFFFFF;
}
body,html,p,ul,ol,h1,h2,h3,h4,h5,h6{
  margin:0; padding:0;
}
.article-detail{
  ul,ol{
    list-style-type: decimal;
  }
  p, ul, ol, h1, h2, h3, h4, h5, h6{
    margin: auto;
    //-webkit-margin-before: 1em;
    //-webkit-margin-after: 1em;
    //-webkit-margin-start: 0px;
    //-webkit-margin-end: 0px;
    //-webkit-padding-start: 40px;
  }
}

h1,h2,h3,h4,h5,h6{font-weight:bold;text-align:left;}
i,span{vertical-align: middle;}
ul,ol{
  list-style:none;
}
.flex{
  display: flex;
  justify-content:center;align-items:center;
}
.marginTop0{margin-top:0 !important;}
.marginTop{margin-top:.3rem !important;}
.marginTop1{margin-top:.1rem !important;}
.marginTop2{margin-top:.2rem !important;}
.marginBottom{margin-bottom:0.2rem !important;}

.paddingTop0{padding-top:0 !important;}
.paddingTop3{padding-top:.3rem !important;}
.paddingTop2{padding-top:.2rem !important;}
.paddingTop1{padding-top:.1rem !important;}
.icon{
  display:inline-block; width: 0.37rem;height: 0.37rem;
  vertical-align: middle;
  text-align: center;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.no-icon{background-image:none !important;}

.no-wrap{
  word-break:keep-all;           /* 不换行 */
  white-space:nowrap;          /* 不换行 */
  overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow:ellipsis;
}
.navigation{
  .swiper-pagination-bullets{
    bottom: -5px !important;
  }
  .swiper-pagination-bullet-active{
    display: inline-block;
    margin: 0 3px;
    width: .3rem;
    height: 3px;
    background: #F85D4C !important;
  }
  .swiper-pagination-bullet{
    display: inline-block;
    margin: 0 3px;
    width: .3rem;
    height: 3px;
    background: #E1E1E1;
  }
}

.bar{
  .swiper-slide{
    div{
      width:6.5rem;
      margin: 0 auto;
    }
  }
  .swiper-container{
    height: 3rem;
  }
  .swiper-pagination-bullet{
    height: 6px;
    width: 6px;
    border-radius: 50%;
    display: inline-block;
    background: #E1E1E1;
    margin-right: 10px;
  }
  .swiper-pagination-bullet-active{
    background: #f85d4c;
  }
}

.icon-nansheng{
  color:#6E9BF7;
}
.icon-nvsheng{
  color:#F9A7CE;
}
.icon-sex{
  font-size:1.4rem;
  vertical-align: middle;
}

.head-portrait{
  $wh:.74rem;
  display: inline-block;
  width:$wh;height:$wh;
  line-height:$wh;
  font-size:$wh;text-align: center;
  border:1px solid #eee;
  background-size:cover;
}

.auto-height-box{
  position: relative;
  max-height:50px;

  .text-box{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    min-height:20px;
    max-height:150px;
    background:blue;
    background: transparent;
    outline:0;
    font-size: inherit;
    color: inherit;
    line-height: 1.5;
    text-indent: inherit;
    letter-spacing: inherit;
    resize:none;
    overflow:hidden;
  }

}
$png-list: (
  unit-act-bg: unit-act-bg,
  icon-my-activity: icon-my-activity,
  icon-activity: icon-activity,
  icon-my-duty-activity: icon-my-duty-activity,
) !default;

@each $key, $val in $png-list {
  .#{$key}{
    background-image:url("#{$imgUrl}/#{$val}.png") !important;
  }
}
$svg-list: (
  protrait-boy: protrait-boy,
  protrait-gril: protrait-gril
) !default;

@each $key, $val in $svg-list {
  .#{$key}{
    background-image:url("#{$imgUrl}/svg/#{$val}.svg") !important;
  }
}
$icon-png-list: (
  editor:editor,
  teacher-gril:teacher-gril,
  notice:notice,
  editor1:editor1,
  star:star,
  search:search,
  arrow-r:arrow-r,
  arrow-down1:arrow-down1,
  add:add,
  close:close,
  checkbox:checkbox,
  checkbox1:checkbox1,
  checkbox4:checkbox4,
  not-select:not-select,
  // checked:checked,
  baby:baby,
  info:info,
  tel:tel,
  sex-unknow:sex-unknow,
  sex-man:sex-man,
  sex-woman:sex-woman,
  smile:smile,
  -teacher-gril:teacher-gril,
  protrait-boy:protrait-boy,
  gril:gril,
  boy:boy,
  protrait-gril:protrait-gril,
  protrait-baby:protrait-baby,
  baby-boy:baby-boy,
  baby-gril:baby-gril,
  //
  school-homework:school-homework,
  grid-notic:grid-notic,
  grid-photo:grid-photo,
  dyn-photo:dyn-photo,
  dyn-notice:dyn-notice,
  dyn-homework:dyn-homework,
  location:location,
  effective:effective,
  tip-success: tip-success,
  tip-warn: tip-warn,
) !default;
@each $key,$val in $icon-png-list {
  .icon-#{$key}{
    background-image:url("#{$imgUrl}/icon-#{$val}.png") !important;
  }
}

$icon-list-svg:(
  dyn-askforleave:dyn-askforleave,
  notdata-bg:notdata-bg,
  //empty-bg:empty-bg,
  recipes-notice:recipes-notice
  // degree-bit:degree-bit,
  // degree-full:degree-full,
  // degree-no:degree-no,
  // degree-abundance:degree-abundance,
) !default;
@each $key,$val in $icon-list-svg{
  .icon-#{$key}{
    background-image:url("#{$imgUrl}/svg/icon-#{$val}.svg");
  }
}

.checkbox-radius{
  border-radius:50%;
  background-size:80%;
  vertical-align:text-bottom;
}
.icon.check-box{
  background-size: 80%;
}
.text-l{ text-align:left; }
.text-r{ text-align:right; }
/* 设置滚动条宽度 */
::-webkit-scrollbar { width: 0px; }
::-webkit-scrollbar { display: none;}
::-webkit-input-placeholder{ color:#BDBDBD; }

input{appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:0;-moz-border-radius:0px;-webkit-border-radius:0px;}
@media only handheld{
  input{-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:0;-moz-border-radius:0px;-webkit-border-radius:0px;}
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:#cbcbcb;    font-family: PingFang-SC-Medium, "Microsoft YaHei", "Helvetica Neue", "Helvetica, Arial", sans-serif;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color:#cbcbcb;    font-family: PingFang-SC-Medium, "Microsoft YaHei", "Helvetica Neue", "Helvetica, Arial", sans-serif;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color:#cbcbcb;    font-family: PingFang-SC-Medium, "Microsoft YaHei", "Helvetica Neue", "Helvetica, Arial", sans-serif;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color:#cbcbcb;    font-family: PingFang-SC-Medium, "Microsoft YaHei", "Helvetica Neue", "Helvetica, Arial", sans-serif;
}

.fl{float:left;}
.fr{float:right;}
.clearfix:after{
  display: block;
  content: '';
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}

.unselect-txt{
  -moz-user-select: none; /* Firefox私有属性 */
  -webkit-user-select: none; /* WebKit内核私有属性 */
  -ms-user-select: none; /* IE私有属性(IE10及以后) */
  -khtml-user-select: none; /* KHTML内核私有属性 */
  -o-user-select: none; /* Opera私有属性 */
  user-select: none; /* CSS3属性 */
}
._v-container,
.select-txt{
  -moz-user-select: text !important; /* Firefox私有属性 */
  -webkit-user-select: text !important; /* WebKit内核私有属性 */
  -ms-user-select: text !important; /* IE私有属性(IE10及以后) */
  -khtml-user-select: text !important; /* KHTML内核私有属性 */
  -o-user-select: text !important; /* Opera私有属性 */
  user-select: text !important; /* CSS3属性 */
}
._v-container{
  ._v-content{
    .pull-to-refresh-layer .spinner-holder .text,
    .loading-layer .no-data-text{
      font-size:.2rem !important;
    }
  }
}

/*.container > *{overflow:auto;} */
.wrap{width:93%;margin:0 auto;}

.mask-shadow{
  position:absolute;top:0;left:0;bottom:0;right:0;z-index: 22;
  background: rgba(0,0,0,.3);
  .mask-box{
    margin-top:2.13rem;
    background:#fff;
  }
}
// .body-wrap{
//   height:100%;
// }
.scroll-wrap{
  // margin-top:$headerH;
  position: relative;
  // position: absolute;
  // top:$headerH;
  top:0;
  left: calc(50% - 3.75rem); z-index:1;
  width:7.5rem;
  height:100%;
  overflow: auto;
}
.scroll-body{
  height:calc(100vh - #{$headerH});
}

// .body-wrap,.scroll-content{
.body-wrap{
  // position: fixed;
  // top: $headerH;
  // left: calc(50% - 3.75rem);
  // bottom: 0;
  //position: relative;
  //top:0;left:0;
  //z-index: 20;
  //width:7.5rem; height:100vh;
  //padding-top: 1rem;
  //background:$bgColor;
}
.no-scroll-wrap{
  position: relative;
  top:0;left:0;
}
.wrapper{width:7.5rem;height:100vh;}
// .container{width:7.5rem;margin:0 auto;}
.container-scroll{
  overflow-y:auto;padding-bottom:2rem;
  height:calc(100vh - #{$headerH});
}

.scroll-container{
  $tipH: 1.1rem;
  position: relative;top:.88rem;left:0;z-index:2;
  margin:0;padding:0;
  width:100%;height:calc(100vh - .8rem);
  overflow:hidden;

  .scroll-list{
    position:absolute;top:0;left:0;z-index:2;
    width:7.5rem;height:100%;

    .content{
      margin:0;padding:0;
      width:7.5rem;
    }
  }
  // .scroll-tip{
  //   position:absolute;left:0;z-index:1;
  //   width:7.5rem;height:$tipH;
  //   line-height:$tipH;
  // }
  // .scroll-top-tip{
  //   top:0;
  // }
  // .scroll-bottom-tip{
  //   bottom:0;
  // }

}


.date-list-wrap{
  position:absolute;left:0; top:0; bottom:0; right:0; z-index:41;
  width:7.5rem; height:100vh;
  background:rgba(0,0,0,.2);
  .date-list-box{
    position: relative;
    margin:0.15rem 6%;
    width:50%;
    background:#fff;border-radius:.2rem;
    top: 2.6rem;
    &:after{
      position:absolute;top:-0.4rem;left:1rem;z-index: 1;
      content:'';
      width:0;height:0;
      border-top:.2rem solid transparent;
      border-right:.2rem solid transparent;
      border-bottom:.2rem solid #fff;
      border-left:.2rem solid transparent;
    }

    .date-list-item{

      width:100%;
      text-align: center;
      padding: .2rem 0;

      .date-icon{
        position: relative;
        $wh:3.5rem;
        display: block;
        margin:0 auto;
        width:$wh;height:$wh;

        .checkbox-radius{
          $wh:.8rem;
          display: none;
          position:absolute;top:2.6rem;right:.3rem;
          width:$wh;height:$wh;
        }
      }
      .date-text{
        display: block;
        margin:0 auto;padding-top: .2rem;
      }


    }

    .active{
      color: $dangerColor;
      .date-text{
        color:$mainColor;
      }
    }
  }
}

.sort-list-wrap{
  position:absolute;left:0; top:0; bottom:0; right:0; z-index:41;
  width:7.5rem; height:100vh;
  background:rgba(0,0,0,.2);
  .sort-list-box{
    position: relative;
    margin:0.15rem 6%;
    width:50%;
    background:#fff;border-radius:.2rem;
    top: .2rem;
    right: -3rem;
    &:after{
      position:absolute;top:-0.4rem;right:1rem;z-index: 1;
      content:'';
      width:0;height:0;
      border-top:.2rem solid transparent;
      border-right:.2rem solid transparent;
      border-bottom:.2rem solid #fff;
      border-left:.2rem solid transparent;
    }

    .sort-list-item{
      width:100%;
      text-align: center;
      padding: .2rem 0;
      &:hover{}
    }

    .active{
      color: $dangerColor;
    }
  }
}

.line-bg{background:#fff;}
.line-space{width:100%;height:10px;background:#fff;}
textarea,input,label{
  display: inline-block;
  vertical-align:middle;
  color: #939393;
  font-size:.3rem;
}
input,textarea{
  outline:none;
  border:none;
  padding: 0;
  resize:none
}
.font1-ellipsis{
  @extend .font1-ellipsis;
}
.font2-ellipsis,
.font3-ellipsis{
  // overflow:hidden;
  // text-overflow:ellipsis;
  // display:-webkit-box;
  // -webkit-box-orient:vertical;
  position: relative;
  overflow: hidden;
  line-height: .4rem !important;
  &:after{
    content: "..."; position: absolute; bottom: -.05rem; right: .05rem; padding-left: .2rem;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
  }
}
.font2-ellipsis{
  // -webkit-line-clamp:2;
  max-height: .8rem;
}
.font3-ellipsis{
  // -webkit-line-clamp:3;
  max-height: 1.2rem;
}
// 数字+英文自动换行
.word-wrap{
  word-wrap:break-word;
  word-break:break-all;
}

.dialog-box{
  $w:5rem;
  position:fixed;top:0;left:0;z-index: 40;
  width:$w;height:2rem;
  color:#fff;text-align: center;line-height:2rem;
  background:#000;border-radius:.3rem;
  .dialog-item{}
  .icon-arrow{
    position:absolute;bottom:-0.5rem;left:calc(#{$w/2} - 0.5rem);
    width:1rem;height:1rem;
    background:#000;
    transform:rotate(45deg);
  }
}
.actionsheet-list{
  max-height:50vh;
  overflow-y:scroll;
  .icon{
    margin-right:.2rem;
    background-size:88%;
  }
}
/* scroll */
.wrapper-scroll{
  width:7.5rem;
  height:100vh;
}
/* tab */

$lineTabH: .88rem;
.line-tab{
  display: flex;
  position:relative;z-index: 30;
  margin:0 auto;
  width:100%; height:$lineTabH;
  text-align:center;
  justify-content:center;
  align-items:center;
  background:#fff;
  .tab-item{
    width:100%; height:$lineTabH; line-height: $lineTabH;
    text-align:center; font-size:.32rem;
    box-sizing:border-box;
    border-bottom: .01rem solid #fff;
    //border-right: 1px solid #F8F8F8;
    &:last-child{
      border-right-width:0;
    }
    &.active{
      color:$mainColor;
      border-bottom-color: $mainColor;
    }
    &.no-border{
      border-right-width:0;
    }
  }
}

/**
  tree
*/
.tree-list {
  text-align: left;
  text-indent: 10px;
  .tree-list-item {
    min-height: 0.74rem;
    overflow: hidden;
    line-height: 0.74rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transition: all 0.1s ease-in-out;
    &.active {
      background: $primaryColor;
      color: #fff !important;
    }
    .icon,
    span {
      vertical-align: middle;
    }
    .icon-arrow-down1 {
      background-size: 70%;
      transform: rotate(-90deg);
    }
    .icon-selected {
      transform: rotate(0);
    }
    // 二级
    ul {
      background: #fff;
      li {
        text-indent: 20px;
        color: #939393;
      }
      li:active {
        background: $primaryColor;
      }
      // 三级
      ul li {
        text-indent: 30px;
        ul li {
          text-indent: 40px;
          ul li {
            text-indent: 50px;
          }
        }
      }
    }
  }
}

.tree-list {
  .tree-list-item {
    border-bottom: 1px solid $borderColor;
    .tree-list {
      .tree-list-item:first-child {
        border-top: 1px solid $borderColor;
      }
    }
  }
  .tree-list-item:last-child {
    border: none;
  }
}


/* search */
// .line-search{
//   background:#F8F8F8;
//   $serarchBtnW: 1rem;
//   .search-btn{
//     display: inline-block;
//     width:$serarchBtnW;height:1.76rem;
//     font-size: .3rem;
//     background:#F8F8F8;
//   }
//   .search-input{
//     width:calc(100% - #{$serarchBtnW} - 1rem);
//     padding: 0.2rem;
//     padding-left:.6rem;
//     background:#fff url("#{$imgUrl}/icon-search.png") no-repeat 3% center;
//     background-size:.3rem;
//     border-radius:0.213rem;
//   }
// }
/* swiper */
.swiper-box{
  position:fixed;
  top: $headerH;
  // top: 0;
  left:0; z-index:41;
  width:7.5rem;
  height:calc(100vh - #{$headerH});
  // height:100%;
  // height:100vh;
  background:$mainFontColor;
  transition:all .4s;
  // .swiper-aside,
  // .swiper-bottom{
  //   width:100%;height:7vh;
  //   background:blue;
  // }
}

/* list li*/
.dyn-list{
  li{
    .line{
      padding-top:.148rem;
      .line-top{
        width:64%;
        text-align: left;
      }
      .fr{
        //.publist-time1{margin-right:2rem;}
      }
    }
    .portrait,
    img.portrait{
      padding:0;
    }
    span.name{color: #aaa;}
    .portrait,
    img.portrait,
    li span.name{
      vertical-align: middle;
    }
    .dyn-info{
      margin-top: .148rem;text-align: left;line-height: 20px;font-weight:bold;
    }
  }
}

/* row-list */
.row-list{
    li{
      .status{
        position:absolute;top: -0.093rem;right: -.481rem;z-index:2;
        width: 1.4rem;
        height: .7rem;
        line-height: .8rem;
        font-size:.25rem;
        color: #fff;text-align:center;
        background: $secondColor;
        transform-origin:center center;
        transform:rotate(45deg);
        &.redColor{background:#F1626C}
      }
      .status1{
        right: .37rem;
        top: .93rem;
        width: .11rem;
        height: .33rem;
        background-size: cover;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        background-position:center center;
        background-repeat:no-repeat;
        background-color:#fff;
      }
      .dyn-info{text-indent:0;}
      .label {
        padding:0;
        & li{
          float:left;
          width:auto;
          padding:.074rem .148rem;margin:0 .148rem 0 0;
          background:#ECF1F3;border-radius:4px;
        }
      }
      .bottom-text{
        text-align:right;
        & li{
          display: inline-block;
          width:auto;padding-right:.11rem;
          float:right;
        }
      }

    }
  }
.row-list{
      .fl{
        img,.nameOrType{vertical-align: middle;}
      }
      .dyn-time{
        color: #aaa;
      }
      .dyn-time1{
        margin-right:.37rem;
      }
  }
.rows-list{
  .rows-line{
    position: relative;
    padding: .37rem 0;
    // width: 100%;
    font-size: .311rem;
    overflow: hidden;
    border-radius:.1rem;
    background: #fff;
    .line{
      position: relative;z-index: 1;
      // width: 100%;
      background: #fff;
      .rows-l{
        .portrait,span,.name,.tit{display:inline-block;vertical-align: middle;}
        $headIconWH:.8rem;
        .portrait{
          display: inline-block;
          width: $headIconWH; height: $headIconWH; margin-right: .196rem;padding:0;
          overflow: hidden;
          border-radius: .074rem;border: 1px solid #fbfbfb;
          // background:url("#{$imgUrl}/headerPortrait.png");
          background:url("#{$imgUrl}/parent/icon-others.png");
          background-size:cover;
          border-radius: 50%;
        }
      }
      .rows-r1{
        width:1.85rem;
        text-align: right;
        .del-btn{
          margin:.074rem 0 0 .74rem;
        }
      }
      .rows-r{
        .time{
          color: #aaa;
        }
        .collectioin-btn{
          margin: .185rem 1rem 0 0;
        }
      }
      img.portrait, .nameOrType {
        vertical-align: middle;
      }
      .nameOrType{
        display: inline-block;
        text-align: left;
        .type{
          display: block;
          margin-top: .196rem;
          width: auto;
          font-size:.25rem; color: #aaa;
        }
      }
      .title{
        position: relative;z-index: 1;
        width: 100%;margin: .185rem 0;
        text-align: left;

        .tip-label{
          margin-right:.1rem;
        }
      }
      .finshTime{
        text-align:left;color: #aaa;font-size:.3rem;line-height:2;
      }
      .content{
        text-indent: 0; font-size: .25rem; font-weight: normal; text-align: left; line-height: .4rem;color:#999;

      }
    }
    .dynamic-line{ // 动态
      .rows-r{
        position: absolute;
        top: .22rem;
        right: .037rem;
        margin: 0;
        .statu{
          display: block;
          width:.185rem;height:.185rem;margin:.11rem 0 0 .48rem;
          background:$dangerColor;
          border-radius:100%;
        }
        .statu-absolute{
          position: absolute;right: .37rem;top: .56rem;
          margin:0;
        }
      }
      .rows-l{
        img.portrait{
          width: .93rem;
          height: .93rem;
        }
      }
      .rows-l1{
        .span-l{
          display: inline-block;
          width: 4.07rem;
          text-align:left;line-height:.74rem;
          .name{display: block;}
          .tit{
            display: block;
            font-size:.3rem;font-weight:normal;

          }
        }
      }
    }
  }
}

.photo-box{
  .rows-line{
    margin:0 auto;
    width:95%;
    background:#fff;
    border-radius:.1rem;
    .wrap{
      width:95%;
    }
  }
}

.pic-grid{
  position: relative;
  z-index: 1;width: 100%;padding: .148rem 0;
  overflow: hidden;text-align: center;
  background: #fff;
  .pic-grid-item{
    position:relative;
    $imgWH:calc(2.25rem - 3.5px);
    float: left;
    width: $imgWH;
    height: $imgWH;
    // height: 5rem;
    margin: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-size:cover;
    background-position:center center;
    img{
      width:100%;height:100%;
    }
    .img-mask{
      position:absolute;top:0;left:0;bottom:0;right:0;
      width:100%;
      line-height: 2.3rem;
      // background:rgba(0,0,0,.5);
      color: #fff;
    }
    &.checkbox-select .img-mask{
      background:rgba(0,0,0,.5);
    }
  }
  .pic-grid-item-v2{
    $imgWH:2.25rem - .16rem;
    margin: 3.5px;
    width: $imgWH;
    height: $imgWH;
    border-radius:.1rem;
    .img-mask{
      border-radius:.2rem;
    }
    .play-btn{
      $wh: .8rem;
      margin-top:($imgWH - $wh) / 2;
      width: $wh;
      height: $wh;
      font-size: $wh;
      color:#fff;
    }
  }

  .checkbox:after{
    position:absolute;right:.11rem;top:.11rem;
    content:'';
    width: .37rem;height: .37rem;
    border-radius:.04rem;
  }
  .checkbox-no-select:after{
    border:1px solid #eee;
    background:url("#{$imgUrl}/icon-checkbox2.png") no-repeat center center;
  }
  .checkbox-select:after{
    border:1px solid transparent;
    background:$mainColor url("#{$imgUrl}/icon-checkbox0.png") no-repeat center center;
    // background-color:
    background-size: 98%;
  }
}
// 通知类型-标签
.tip-label{ // 普通
  position:relative; z-index: 2;
  display:inline-block;
  padding:.11rem .2rem;
  height:.4rem;
  color:#fff;line-height:.4rem;font-size:.3rem;
  border-radius:.074rem;
  background:$primaryColor;
  transform:scale(.6);
  &:after{
    content:'';
    position:absolute;top:0;right:-.148rem;
    z-index: 1;
    width:0;height:0;
    border-top:.22rem solid $primaryColor;
    border-right:.22rem solid transparent;
    border-bottom:0 solid transparent;
    border-left:0 solid transparent;
  }
}
.tip-label2{ // 回执
  background:$warningColor;
  &:after{
    border-top:.22rem solid $warningColor;
  }
}
.tip-label3{ // 报名
  background:$dangerColor;
  &:after{
    border-top:.22rem solid $dangerColor;
  }
}

/* 上传图片 */
.publish-img-box{
  .list-img{
    width: 100%;
    li{
      position:relative;
      float:left;
      // overflow: hidden; 不要放开这个注释
      width:22%;height: 1.65rem;margin:1%;
      .img-cls,
      img{
        display: inline-block;
        width:100%; height: 100%;
        background-size:cover;
        background-position:center center;
      }
      input.getImgUrl_file {
        width:100%;height:100%;
        font-size: 0; /* 为了去掉‘未选择任何文件’这几个字，也可以随便弄到哪里*/
      }
      input.getImgUrl_file::-webkit-file-upload-button {
        color: $mainFontColor;font-size: .311rem;
        opacity:.5;
        border: 0;
        // background: red;
      }
    }
    .add-btn{
      line-height: 2.4rem;font-size: .3rem;text-align: center;
      background-color: #eee;
      background-size: 28%;

      background-repeat: no-repeat;
      background-position: center 41%;
    }
    .icon-close{
      position:absolute;top:-0.074rem;right:-0.074rem;
    }
  }
}
/* table-flex */
.table-head{
  border-bottom:1px solid #eee;
  .table-item{
    font-weight:bold;
  }
}
.table-flex{
  position:relative;z-index:40;
  display: flex;
  text-align:center;
  justify-content: space-between;
  align-items: center;
  .table-item{
    width:50%;height:.74rem;
    padding:.074rem 0;
    line-height:.74rem;
    background:#fff;
  }
  .table-line{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items:center;
  }
}
.nodata-line{
  line-height: .56rem;font-size:.3rem;color:#d8d8d8;
}

/* 模块列表 学籍管理 */
.module-list{
  font-size:.3rem;
  margin: .38rem auto;
  width:100%;
  .module-list-item{
    padding:.07rem .19rem;margin: .38rem auto;
    background:#fff;border-radius:.1rem;
    // box-shadow:0 0 .22rem #e4e4e4;
    .item-col{
      margin:0 1.5%;padding:.22rem 0;
      width:30%;height: 1.48rem;
      line-height: 1.1rem;
      .main-label{
        $iconW:.2rem;
        position:relative;
        width:100%;
        font-weight: 100;color:#5E5E5E;
        .main-label-name{
          max-width:calc(100% - #{$iconW} * 2);
          font-weight: 100;
        }
        .main-label-name,.sex-icon{vertical-align: middle;}
        .sex-icon{
          position: absolute;top: 1rem;right: 0;
          width:$iconW;height:$iconW;
        }
      }
      .copy-label{
        color:#A0A0A0;
        font-size:.3rem;line-height:0;
      }
    }

  }
}
// 班级类别 圆
.class-type-circle{
  .icon{
    $wh:.92rem;
    display: inline-block;
    width:$wh; height:$wh;
    line-height: $wh;text-align: center;color:#fff;font-weight:bold; font-size: .311rem;
    border-radius:50%;
    background:#ddd;

  }
  .big-icon{
    background: linear-gradient(#98ACF7 , #8185FB);
  }
  .middle-icon{
    background: linear-gradient(#F5C55F , #F3A248);
  }
  .small-icon{
    background: linear-gradient(#87EF6E , #5CDA42);
  }
}

// 行模块 请假记录
.module-box{
  width:100%;
  font-size: .26rem;

  .module-wrap{
    position: relative;
    margin: 0 auto;padding:0 0 .33rem .074rem;
    overflow:hidden;
    width:90%;
    background:#fff;
    border-radius: .1rem;
    .effect-status{
      $wh: 2.22rem;
      position: absolute; right: -.48rem; top: -.49rem;
      width: $wh; height: $wh;
      background-size: contain;
    }

  }

  .wrap{

    text-align:left;
    border-radius:.074rem;

    .line{
      line-height:.48rem;
    }
    .line-top{
      margin-bottom:.33rem;
      height:.99rem;
      line-height:.99rem; font-size:.28rem;
      border-bottom:1px solid $borderColor;
    }

    .line-bottom{
      margin-top:.074rem;
      .btn{
        border-radius: 1.3rem;
      }

    }
  }
}
/* 表单列表 学籍详情 */
.form-list{
  .line{
    border-bottom:1px solid $bgColor;
    background:#fff;
    .icon, span{vertical-align:middle;}
    label{ float:left; }
    input{
      float:right;
      text-align:right;
    }
    label,
    input{
      padding-right:.185rem;
      font-size:.3rem; line-height: 1.11rem;
    }

  }
  .textarea-row{
    height:1.85rem;
    textarea{
      float:right;
      margin-top: .34rem;
      width:60%;min-height:1.48rem;
      text-align:left; line-height:20px;
    }
  }

  .line-sex{
    .fr{
      padding-right:.37rem;
      line-height: 1.11rem;
      .icon{
        margin-right:.185rem;
        background-size:86%;
      }
    }
  }

}
/* role-list */
.role-list{
  margin: .74rem auto;
  .role-list-item{
    margin: .56rem auto;padding: .22rem;
    width:70%;
    background:#fff;
    box-shadow:0 0 10px #f5f5f5;
    border-radius:.074rem;border:.037rem solid #f5f5f5;
    &.active{
      border-color:$mainColor;
    }
    .left-aside{
      margin: .48rem 0 0 .11rem;
      .name1{
        font-size:.3rem;
      }
      .name2{
        color:#A4A3A3;font-size:.3rem;
      }
    }
    .protrait{
      $wh: 1.85rem;
      margin-left:.037rem;
      width:$wh;height:$wh;
    }
  }
}

.badge {
  line-height: 1;
  padding: 3px 6px;
  color: $mainFontColor;
  border-radius: 100px;
  background-color: rgba(0,0,0,.15);
}
.badge-primary {
  color: #fff;
  background-color:$primaryColor
}
.badge-success {
  color: #fff;
  background-color: $successColor
}
.badge-warning {
  color: #fff;
  background-color: $warningColor
}
.badge-danger{
  color: #fff;
  background-color: $dangerColor
}

.face-wraaper{
  position:relative;
  margin-top:.185rem;
  width:100%;
  .text-area{
    overflow:hidden;
    width:100%;
  }
  .text-box{
    padding: .074rem .22rem;
    width:calc(100% - .44rem);
    outline:none;
  }
  .smile-line{
    position:relative;
    padding:.074rem  0 .074rem 0;
    width:100%;
    background: #f8f8f8;
    .icon-smile{
      $iconWH: .52rem;
      margin-right: .37rem;
      width:$iconWH;height:$iconWH;
    }
  }
  .face-container{
    position:absolute; top: 110%;right: 4%; z-index: 30;
    width:94%;
    .face-box{
      position:relative;
      z-index: 30;top:-.37rem;
      overflow:hidden;overflow-y:auto;
      padding:.074rem;
      width: 100%;height: 1.85rem;
      background:#fff;box-shadow:0 0 2px #000;border-radius:.074rem;
      img{
        padding:.037rem;
      }
    }
  }
  .face-arrow{
    $wh:.37rem;
    position:relative;left:93%;top:-.185rem;
    z-index: 30;
    width:$wh;height:$wh;
    background:#fff;
    transform:rotate(45deg);box-shadow:0 0 2px #000;border-radius:.074rem;
  }
  .btn-submit{display: none;}
}
.char-window{
  .text-area{
    float:left;margin: .074rem 0 .074rem 2%;
    // width:68%;
    width: 77%;
    font-size: .37rem;
    border-bottom:1px solid $mainColor;
  }
  .smile-line{
    position:absolute;bottom:.074rem;right:20%;
    margin:0;padding:0;
    width: .74rem;
    background:none;
    .icon-smile{
      margin:.185rem .074rem;padding:0;
    }
  }
  .btn-submit{
    position:absolute; bottom: 12%;right: 2%;
    display: block;
    width: 1.185rem;height:.74rem;
    color:#fff;font-size: .3rem;line-height: .74rem;
    background:$mainColor;border-radius:.074rem;

  }
  .face-container{
    top:-205%;
  }
  .face-arrow{
    left: 33%;
    top: -.185rem;
  }

}

/* 带图标，右侧带箭头 行样式 */
.view-line{
  // margin:1rem auto;
  width:100%;
  text-align:left;
  overflow: hidden;

  $lineHeight: 1.14rem;
  .view-line-item{
    margin:0 auto;
    height: $lineHeight;
    line-height: $lineHeight;color:#585858; font-size: .3rem;
    background:#fff url('../../../static/img/icon-arrow-r.png') no-repeat 96% center;
    background-size: 0.3rem;

    .wrap{
      border-bottom:1px solid $bgColor;
    }
    &:last-child .wrap{
      border:none;
    }

    .input-line{
      .input-cls{
        margin-top: .37rem;
        width:48%;
        font-size: 100%; font-weight: normal; text-align:right;
        line-height:1;
      }
    }
    .tag-label{
      padding-left:.01rem;
    }
    .fr,.fl{
      color:$mainFontColor;
    }

    .fr-font-color{
      color:#cbcbcb;
    }
    .fl-font-color{
      color: #a2a2a2;
    }
    textarea.auto-height-box{
      margin-right:.2rem;margin-top:.2rem;
      width:5rem;height:2.5rem;
      line-height:2.5rem;text-align:right;
    }
  }
  .view-line-item.no-bg{
    width:100%;
    background:#fff;
  }
  .view-line-item:not(.no-bg){
    .wrap{
      .fr{
        padding-right: .314rem;
        min-width: .74rem;
        text-align: right;
      }
    }
  }
  .view-line-item.no-border{
    border:none;
  }
  .view-line-item.view-line-text-center{
    text-align:center;
  }

  .view-line-box{
    padding:.1rem 0;
    background:#f1f1f1;
    .wrap{

        li{
            float:left;
            margin:.1rem .2rem;
            color:#b9b9b9;
        }
    }

}

  .column-set{
    display: flex;
    flex-direction: column;
  }

  .view-line-img{
    display: inline-block;
    padding-right:0.2rem;
    width: .38rem;
    background-size:cover;
    vertical-align: middle;
  }
  .view-line-img,
  .view-line-text{
    vertical-align: middle;
    font-size:.3rem;
  }
  .checkbox-radius{
    border-radius:50%;
    vertical-align:text-bottom;
  }
  .view-line-r{
    float:right;
    margin-right:1rem;
  }
  .view-line-r1{
    margin-right:0;
  }

  .opration-line{
    $wh: .74rem;
    .opration-btn{
      display: inline-block;
      width:$wh;height:$wh;
      line-height:$wh;text-align:center;font-size:.4rem;color:$mainColor;
      vertical-align: middle;
      //background:#eee;
    }
    .opration-input{
      width:$wh * 1.3;height:$wh;
      color:$mainFontColor;text-align:center;
      background:#E4E4E4;
    }
  }

}
.view-line:last-child .view-line-item{
  border:none;
}

.view-line2{
  .item-l{
    width:30%;
  }
  .item-r{
    width:68%;
    text-align:right;
  }
  .item-l,.item-r{
    line-height: .74rem;
    padding:.148rem 0;
  }
}
.view-line3{
  padding:.5rem 0;
  .view-line-item{
    line-height:1.2rem;
  }
}

.viewLinefade-enter-active{
  animation:fadeIn .8s;
}
.viewLinefade-leave-active{
  animation: fadeOut .8s;
}
@keyframes fadeIn{
  0%{opacity:0}
  50%{opacity:1}
  100%{
    position:relative;
  }
}
@keyframes fadeOut{
  0%{opacity:1}
  50%{opacity:0}
  100%{
    position:fixed;top:-999999px;left:-999999px;
  }
}

// 招生
.recruit-box{
  .screen-top{
    line-height: .93rem;
    .fr.icon{
      margin-top:.27rem;
      background-size:70%;
    }
    .fr.btn-box{
      margin-top: .185rem;
    }
  }
  .module-list-item{
    .recruit-col.fl{
      padding-left:6%;
      width:72%;

      border-right:2px solid $bgColor;
      .recruit-l{
        padding-top:.185rem;
      }

      .recruit-l-b{
        line-height: .56rem;font-size: .1.11rem;
        flex-wrap:wrap;
        justify-content:flex-start;
        .fl{
          margin-top:.185rem;
          width:33%;
          .tit{
            color:#9D9D9D;
          }
        }

      }
    }
    .recruit-col.fr{
      width:20%;
      font-size: .3rem;text-align: center;
    }
  }
}

// 招生 流程处理 弹窗
.version-2 .recruit-progress-dialog-box{
  z-index:32;
  background: rgba(0, 0, 0, 0.3);
    .mask-box{
        padding:.148rem 0;margin:0 auto;margin-top: 2.22rem;
        width:93%;
        border-radius:.074rem;
        box-shadow:0 0 .37rem #818181;
        .line{
            margin:.185rem auto;
        }
        .mask-tit{
            line-height:.56rem;text-align:center;font-size:.3rem;
        }
        .line-checkbox{
            margin:.37rem auto;
        }
        .text-box{
            padding: .37rem;
            width:calc(100% - .74rem);height:1.48rem;
            border:1px solid #E0E3EA;background:#F6F6FA;border-radius:.11rem;
        }

        .btn-box{
            margin: .074rem auto;
            width:40%;
            justify-content:space-between;

            .btn{
                width:48%;
            }
        }
    }
}

// 首页 角色切换 弹窗
.role-list-wrap{
  position:absolute;left:0; top:0; bottom:0; right:0; z-index:41;
  width:7.5rem; height:100vh;
  background:rgba(0,0,0,.2);
  .role-list-box{
    position: relative;
    margin:.8rem 2%;
    width:96%; height:6rem;
    background:#fff;border-radius:.2rem;
    $borderW: .2rem;
    &:after{
      position:absolute;top: -.4rem;right: .3rem;z-index: 1;
      content:'';
      width:0;height:0;
      border-top: $borderW solid transparent;
      border-right: $borderW solid transparent;
      border-bottom: $borderW solid #fff;
      border-left: $borderW solid transparent;
    }

    .role-list-item{

      width:100%;
      text-align: center;

      .role-icon{
        position: relative;
        $wh:3.5rem;
        display: block;
        margin:0 auto;
        width:$wh;height:$wh;

        .checkbox-radius{
          $wh:.3rem;
          display: none;
          position:absolute;top:2.6rem;right:.3rem;
          width:$wh;height:$wh;
        }
      }
      .role-text{
        display: block;
        margin:0 auto;
        // padding-top: .2rem;
      }


    }

    .active{
      .role-icon .checkbox-radius{
        display: block;
      }
      .role-text{
        color:$mainColor;
      }
    }

  }

}
// 较窄弹窗 class-detail.vue, all-class-attendance.vue
.role-list-wrap2{
  .role-list-box{
    margin-left:75%;
    // padding: 0.4rem 0;
    width:24%; height:auto;

    .role-list-item{
      display:block;
      width:100%;
      text-align: center; line-height:1.9rem;
    }

    .role-list-item:last-child .role-text{
      border-bottom:none;
    }

  .role-text{
      width:76%;
      border-bottom:1px solid #F2F2F2;
  }

  .active{
      .role-icon .checkbox-radius{
          display: block;
      }
      .role-text{
          color:$mainColor;
      }
  }

  }
}

.article-detail{
  img{
    display: block;
    margin: 0 auto; padding: 0;
    width: 100%;
  }
}

// .campus-module-box{
//   padding:.3rem 0;
// }
